<template>
  <div class="main_box">
    <CommonHeader title="重点关注任务"></CommonHeader>
    <div class="main_content">
        <div class="declare_title">
            <div class="title">{{ declareData.title }}</div>
            <div class="state" :class="declareData.status == 1?'red':'blue'">{{formateState(declareData.status)}}</div>
        </div>
        <div class="form_title">批示内容</div>
        <div class="form_content">{{ declareData.content }}</div>
        <div class="form_title">反馈内容</div>
        <div class="form_content">{{ declareData.feedbackContent?declareData.feedbackContent:'无反馈内容' }}</div>
        <div class="form_title">反馈附件</div>
        <div class="file_list" v-if="fileItem2.annexName">
            <div class="file_item" @click="downloadFile(fileItem2)">
                <i class="file_icon" :class="formateFileType(fileItem2.annexName)"></i>
                <div class="content">{{fileItem2.annexName}}</div>
            </div>
        </div>
        <div v-else class="no_file">无反馈附件</div>
    </div>
  </div>
</template>

<script>
import CommonHeader from '@/components/commonHeader'
export default {
  // eslint-disable-next-line
  name: 'feedbackDetail',
  components: {
    CommonHeader
  },
  data(){
    return{
        fileItem:{},
        fileItem2:{},
        declareData:{},
        selectList:[
            {
                text:'待反馈',
                value:'1'
            },
            {
                text:'已反馈',
                value:'2'
            }
        ],
    }
  },
  computed:{
    formateState(){
        return function(state){
            switch(state){
                case '1':
                    return '待反馈'
                default:
                    return '已反馈'
            }
        }
    },
    formateFileType(){
       return function(fileName){
            if(fileName){
                const arr = fileName.split('.')
                const type = arr[arr.length - 1]
                if(type === 'docx' || type === 'doc'){
                    return 'word'
                }else if(type === 'xlsx' || type === 'xls'){
                    return 'word'
                }else if(type === 'pdf'){
                    return 'pdf'
                }else{
                    return ''
                }
            }else{
                return ''
            }
       }
    },
  },
  created() {
    this.declareData = this.$route.query
  },
  methods: {
    downloadFile(item){
        window.open(item.filePath, '_blank')
    }
  },
}
</script>

<style scoped>
.main_box{
    width: 100vw;
    height: 100vh;
    box-sizing: border-box;
    overflow-y: auto;
    overflow-x: hidden;
    background-color: #f4f5fa;
}
.main_content{
    padding:15px;
}
.declare_title{
    display: flex;
    justify-content: space-between;
    padding:10px 15px;
    font-size:14px;
    background-color: #fff;
}
.declare_title .title{
    max-width: 75%;
    text-align: left;
}
.declare_title .state{
    height: 20px;
    line-height: 20px;
    padding:0 10px;
    background-color:#7f7f7f;
    color:#fff;
    font-size:13px;
    border-radius:5px;
}
.declare_title .state.red{
    background-color:#f60e36;
}
.declare_title .state.blue{
    background-color:#4ca5f1;
}
.form_title{
    width: 100%;
    text-align: left;
    padding:10px 0;
    font-size:16px;
    color:#333;
}
.form_content{
    width: 100%;
    min-height: 80px;
    text-align: left;
    padding:10px 15px;
    font-size:14px;
    color:#666;
    background-color: #fff;
    box-sizing: border-box;
}
.file_list .file_item{
    display: flex;
    font-size:14px;
    color:#2a81e6;
    padding:10px 15px;
    background-color: #fff;
    margin-bottom: 10px;
    border-radius: 8px;
}
.file_list .file_item .content{
    width: calc(100% - 60px);
    height: 30px;
    line-height: 30px;
    text-align: left;
    padding:0 10px;
    margin-right: 10px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.file_list .file_item .file_icon{
    display: inline-block;
    width: 28px;
    height: 28px;
    background: url("../../assets/image/file.png") no-repeat;
    background-size: 100% 100%;
    cursor: pointer;
}
.file_list .file_item .file_icon.pdf{
    background: url("../../assets/image/Pdf.png") no-repeat;
    background-size: 100% 100%;
}
.file_list .file_item .file_icon.word{
    background: url("../../assets/image/word.png") no-repeat;
    background-size: 100% 100%;
}
.file_list .file_item .file_icon.excel{
    background: url("../../assets/image/excel.png") no-repeat;
    background-size: 100% 100%;
}
.no_file{
    width: 100%;
    text-align: left;
    padding:10px 15px;
    font-size:14px;
    color:#999;
    background-color: #fff;
    box-sizing: border-box;
}
.main_footer{
   width: 100%;
   height: 50px;
   font-size:16px;
   position: fixed;
   left:0;
   bottom:0;
}
.main_footer >>> .van-button{
    width: 90%;
}
</style>